new Vue({
    el: '#app',
    data: {
        // 控制“新增队伍”模态框的显示/隐藏
        showAddTeamModal: false,
        // 存储“新增队伍”表单的数据
        newTeam: {
            name: '',
            highSchool: '',
            leaderName: '',
            batch: '母校行活动秋季批次', // 下拉框默认值
            college: 'A学院', // 下拉框默认值
            contact: ''
        },
        // 筛选条件（与表格筛选联动）
        selectedBatch: '',
        selectedCollege: '',
        highSchoolName: '',
        teamName: '',
        // 分页相关
        currentPage: 1,
        pageSize: 10,
        totalPages: 1,
        totalItems: 0,
        // 模拟已有队伍数据
        teams: [
        ]
    },
    computed: {
        // 筛选并分页后的队伍列表
        filteredTeams() {
            let result = [...this.teams]; // 深拷贝避免直接修改原数组

            // 按“活动批次”筛选
            if (this.selectedBatch) {
                result = result.filter(team => team.batch === this.selectedBatch);
            }
            // 按“所属学院”筛选
            if (this.selectedCollege) {
                result = result.filter(team => team.college === this.selectedCollege);
            }
            // 按“中学名称”模糊筛选
            if (this.highSchoolName) {
                result = result.filter(team => team.highSchool.includes(this.highSchoolName));
            }
            // 按“队伍名称”模糊筛选
            if (this.teamName) {
                result = result.filter(team => team.name.includes(this.teamName));
            }

            // 计算总条数和总页数
            this.totalItems = result.length;
            this.totalPages = Math.ceil(this.totalItems / this.pageSize);

            // 分页截取
            const startIndex = (this.currentPage - 1) * this.pageSize;
            return result.slice(startIndex, startIndex + this.pageSize);
        }
    },
    methods: {
        // 执行筛选（点击“搜索”按钮触发）
        search() {
            this.currentPage = 1; // 筛选后重置到第1页
        },
        // 重置筛选条件（点击“重置”按钮触发）
        resetFilter() {
            this.selectedBatch = '';
            this.selectedCollege = '';
            this.highSchoolName = '';
            this.teamName = '';
            this.currentPage = 1;
        },
        // 示例：“更多操作”按钮逻辑（可根据需求扩展）
        showMoreOptions(teamId) {
            console.log('点击“更多操作”，队伍ID：', teamId);
        },
        // 保存新增队伍（点击“保存”按钮触发）
        saveNewTeam() {
            // 【步骤1：表单验证】确保必填字段不为空
            if (
                !this.newTeam.name ||
                !this.newTeam.highSchool ||
                !this.newTeam.leaderName ||
                !this.newTeam.contact
            ) {
                alert('队伍名称、中学名称、队长姓名、联系方式为必填项，请填写完整！');
                return; // 验证不通过，终止后续逻辑
            }

            // 【步骤2：构造新队伍对象】
            const newTeam = {
                id: Date.now(), // 用时间戳生成临时唯一ID
                name: this.newTeam.name,
                highSchool: this.newTeam.highSchool,
                leaderName: this.newTeam.leaderName,
                batch: this.newTeam.batch,
                college: this.newTeam.college,
                memberCount: 0, // 初始团队人数为0
                contact: this.newTeam.contact,
                createTime: new Date().toLocaleString() // 记录当前时间为创建时间
            };

            // 【步骤3：添加到队伍列表】
            this.teams.unshift(newTeam); // unshift：将新队伍添加到列表头部

            // 【步骤4：关闭模态框 + 重置表单】
            this.showAddTeamModal = false;
            this.newTeam = {
                name: '',
                highSchool: '',
                leaderName: '',
                batch: '母校行活动秋季批次',
                college: 'A学院',
                contact: ''
            };

            // 【步骤5：提示成功】
            alert('队伍新增成功！');
        }
    },
    mounted() {
        // 页面加载时，初始化“总页数”
        this.totalItems = this.teams.length;
        this.totalPages = Math.ceil(this.totalItems / this.pageSize);
    }
});